import React from 'react';
// 根据路由参数proid 获取详情页数据
import { useParams, useHistory } from 'react-router-dom';
import { getDetailApi } from '@/api/detail'
import { addCarApi, getCarlistApi } from '@/api/car'
import { useEffect, useState, useCallback } from 'react';
import { Ellipsis, ImageViewer, Mask, Button, Space, Toast, Badge } from 'antd-mobile'
// 引入导航组件
import Mynavbar from '@/components/Mynavbar';
//导入轮播图组件
import Myswiper from '@/components/Myswiper'
// 引入styled
import styled from 'styled-components';
// 引入 react-redux 中操作redux 数据的hook
import { useSelector } from 'react-redux'


const Detail = () => {
    // const loc = useLocation();
    const par = useParams()
    // 轮播图数组
    const [swiperArr, setswiperArr] = useState([])
    // 当前商品信息对象
    const [goodsObj, setgoodsObj] = useState({})
    // 是否显示图片预览
    const [visible, setVisible] = useState(false)
    // 是否显示视频mask
    const [visibleVideo, setVisibleVideo] = useState(false)
    // 定义徽标数据 默认为0
    const [carNum, setCarNum] = useState(0)

    // 定义一个事件方法,该事件方法用来控制visible 是否显示
    const changeVisibleFn = () => {
        setVisible(true)
    }

    // 数组reduce 方法使用
    // const arr = [1, 2, 3, 4, 5]
    // const result = arr.reduce((sum, item) => {
    //     return sum += item
    // }, 0)
    // console.log('result', result);

    const { userId } = useSelector(state => state);
    // console.log('store', store);
    // 获取购物车数据方法
    // 使用useCallBack处理函数,防止重复创建
    // 语法: const 函数名 = useCallBack(()=>{},[依赖的值,...])
    const getcatlistFn = useCallback(() => {
        getCarlistApi({ userid: userId }).then(res => {
            //console.log('购物车商品数据', res);

            if (res.data.code == '10020') {
                setCarNum(0)
            } else {
                const sum = res.data.data.reduce((sum, item) => {
                    return sum += item.num
                }, 0)
                // 修改购物车徽标数据
                setCarNum(sum)
            }
        })
    }, [])

    useEffect(() => {
        getDetailApi(par).then(res => {
            //console.log(res);
            //console.log(res.data.data.banners[0].split(','));
            let newswiperArr = res.data.data.banners[0].split(',').map((item, index) => {
                return { bannerid: index, img: item }
            })
            // console.log(res.data.data.desc.replace(/\n/g, ''));
            let obj = res.data.data;
            // 注意: 正则表达式 /\n/ 表示包含该\n的字符串. 
            // 注意: 正则表达式 /^\n$/ 表示只匹配\n这个字符串, 而刚才出现bug 的字符串不是只有\n,他是包含\n
            obj.desc = res.data.data.desc.replace(/\n/g, '');
            setswiperArr(newswiperArr)
            setgoodsObj(obj)

        })

        // 初始化获取购物车数据方法
        getcatlistFn()

    }, []);

    // 创建his 对象
    const his = useHistory()
    return (
        <>
            {/* 导航条 */}
            <Mynavbar isshow={true}>详情</Mynavbar>
            {/* 轮播图 */}
            <Myswiper swiperArr={swiperArr} changeVisibleFn={changeVisibleFn}></Myswiper>
            {/* 图片预览 */}
            {
                console.log('swiperArr123', swiperArr)
            }
            <ImageViewer.Multi
                images={swiperArr.map(item => item.img)}
                visible={visible}
                defaultIndex={1}
                onClose={() => {
                    setVisible(false)
                }}
            />
            {/* 视频播放 */}
            <Mask visible={visibleVideo} onMaskClick={() => setVisibleVideo(false)}>
                {
                    visibleVideo ? <video
                        autoPlay
                        controls
                        preload={'true'}
                        style={
                            {
                                position: 'absolute',
                                top: '10%',
                                left: 0,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                width: '100%',
                            }
                        }
                        src='https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4'
                    ></video> : <></>
                }
            </Mask>
            <MyBtn>
                <Button color='primary' fill='solid' onClick={() => {
                    setVisibleVideo(true)
                }}>
                    视频播放
                </Button>
            </MyBtn>
            {/* 商品信息 */}
            <Ellipsis direction='end' rows={2} content={goodsObj.desc} />
            <p>{goodsObj.sales}</p>

            {/* 底部的tabvar 加入购物车|立即购买 */}
            <Space style={{
                position: 'fixed',
                bottom: 0,
                left: 0
            }}>
                <Badge content={carNum}>
                    <p style={
                        {
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }
                    }
                        onClick={() => {
                            his.push('/car')
                        }}
                    >
                        <span className='iconfont icon-gouwuche'></span>
                        <span>购物车</span>
                    </p>
                </Badge>
                <Button color='danger' onClick={() => {
                    // 点击加入购物车
                    if (localStorage.getItem('token')) {
                        // 说明已经登录,调用加入购物车接口, 实现加入购物车功能
                        // console.log('goodsObj', goodsObj.proid)
                        // console.log('userId', userId)
                        addCarApi({
                            userid: userId,
                            proid: goodsObj.proid,
                            num: 1
                        }).then(res => {
                            //console.log('res', res)
                            if (res.data.code == 200) {
                                Toast.show({
                                    icon: 'success',
                                    content: '加入成功',
                                });
                                // 重新修改徽标,调用购物车接口
                                getcatlistFn()
                            } else {
                                Toast.show({
                                    icon: 'error',
                                    content: res.data.message,
                                });
                            }

                        })
                    } else {
                        // 提示一下
                        Toast.show({
                            content: '请先登录',
                            afterClose() {
                                his.push('/login')
                            }
                        })
                    }
                }}>加入购物车</Button>
                <Button color='primary'>立即购买</Button>
            </Space>
        </>
    );
}

export default Detail;

// 定义样式
const MyBtn = styled.div`
    position: fixed;
    top: 0;
    left:50%;
    top: 50%;
   transform: translateX(-50%);


`
